<template>
  <mu-dialog transition="slide-right" fullscreen :open.sync="openFullscreen">
    <div class="p-box">
      <div class="p-header">
        <mu-appbar color="primary" class="lan-header">
          <mu-button icon slot="left" @click="close">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>筛选条件
          <mu-button icon slot="right" @click="clear">
            <span class="text">清空</span>
          </mu-button>
        </mu-appbar>
      </div>
      <div class="p-content">
        <div class="lan-dialog-body" style="background:#fff">
          <mu-form
            ref="form"
            :model="form"
            class="mu-lan-form"
            :label-position="'left'"
            label-width="25%"
          >
            <mu-form-item label="开始时间">
              <mu-date-input
                v-model="form.startTime"
                placeholder="请选择"
                container="bottomSheet"
                value-format="YYYY-MM-DD"
                :should-disable-date="disabledStartDates"
              ></mu-date-input>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="结束时间">
              <mu-date-input
                v-model="form.endTime"
                placeholder="请选择"
                value-format="YYYY-MM-DD"
                container="bottomSheet"
                :should-disable-date="disabledEndDates"
              ></mu-date-input>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
          </mu-form>
        </div>
      </div>
      <div class="p-footer">
        <mu-button full-width color="primary" @click="confirm">确认</mu-button>
      </div>
    </div>
  </mu-dialog>
</template>
<script>
import mTabs from "@/tabs/mTabs";
export default {
  name: "TaskModeRealMeasure",
  components: {
    mTabs
  },
  data() {
    return {
      openFullscreen: false,
      form: {
        startTime: "",
        endTime: ""
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    init() {
      this.openFullscreen = true;
    },
    close() {
      this.openFullscreen = false;
      this.clear();
    },
    clear() {
      this.form = {
        startTime: "",
        endTime: ""
      };
    },

    //点击确定
    confirm() {
      this.$emit("searchList", this.form);
      this.close();
    },
    //不可选择的开始日期
    disabledStartDates(date) {
      if (this.form.endTime) {
        return date.getTime() > new Date(this.form.endTime).getTime();
      } else {
        return false;
      }
    },
    //不可选择的结束日期
    disabledEndDates(date) {
      if (this.form.startTime) {
        return date.getTime() < new Date(this.form.startTime).getTime();
      } else {
        return false;
      }
    }
  },
  destroyed() {}
};
</script>
<style lang="less">
</style>
